<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>主页面 - 饰品交易平台</title>
  <style>
    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      background-color: #121212;
      background-image: url('images/background.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      color: #e0e0e0;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 0;
    }

    .container {
      flex: 1;
      width: 100%;
      max-width: 1000px;
      margin: 0 auto;
      padding: 40px;
      border-radius: 8px;
      box-sizing: border-box;
      background-color: transparent;
      box-shadow: none;
    }

    header h1 {
      margin-bottom: 24px;
      font-weight: 700;
      text-align: center;
      color: #aa9bf9;
    }

    .login-link, .register-link, .user-link {
      position: fixed;
      top: 20px;
      background-color: #aa9bf9;
      color: #121212;
      padding: 10px 20px;
      font-weight: 700;
      font-size: 16px;
      border-radius: 6px;
      text-decoration: none;
      transition: background-color 0.3s ease;
      z-index: 1000;
      display: inline-block;
    }

    .login-link:hover, .register-link:hover, .user-link:hover {
      background-color: #8c7ee6;
    }

    .login-link { right: 100px; }
    .register-link { right: 20px; }
    .user-link { right: 20px; cursor: pointer; }

    .equipment-section {
      margin-top: 40px;
      padding: 20px;
      border-radius: 6px;
      color: #e0e0e0;
      background-color: rgba(42, 42, 42, 0.85);
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      background-blend-mode: overlay;
    }

    .hot-section {
      background: linear-gradient(rgba(42,42,42,0.85), rgba(42,42,42,0.85)), url('images/csgo2.jpg');
      background-size: cover;
      background-position: center;
    }

    .new-section {
      background: linear-gradient(rgba(42,42,42,0.85), rgba(42,42,42,0.85)), url('images/csgo4.jpg');
      background-size: cover;
      background-position: center;
    }

    .equipment-section .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .hot-section .header h2 {
      color: #ffcc00; /* 热门饰品：白色 */
    }

    .new-section .header h2 {
      color: #ffcc00; /* 最新上架：黄色 */
    }

    .equipment-section .header .view-all {
      color: #8c7ee6;
      text-decoration: none;
      font-weight: 600;
      cursor: pointer;
    }

    .equipment-section .header .view-all:hover {
      text-decoration: underline;
    }

    .equipment-list {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }

    .equipment-card {
      background-color: #3a3a3a;
      border-radius: 6px;
      width: 150px;
      padding: 10px;
      box-sizing: border-box;
      text-align: center;
      color: #e0e0e0;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .equipment-card:hover {
      background-color: #555555;
    }

    .equipment-card img {
      max-width: 100%;
      height: 100px;
      object-fit: contain;
      margin-bottom: 8px;
    }

    .equipment-name {
      font-weight: 600;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
</head>
<body>

<div id="topLinks">
  <!-- Vue渲染登录/注册或用户名 -->
</div>

<div class="container" id="app">
  <header>
    <h1>冈勿FFUB</h1>
  </header>

  <!-- 热门饰品展示区域 -->
  <div class="equipment-section hot-section">
    <div class="header">
      <h2>热门饰品</h2>
      <a href="equipment_list.html" class="view-all">进入市场</a>
    </div>
    <div class="equipment-list">
      <div
              v-for="item in equipments"
              :key="item.equipmentId"
              class="equipment-card"
              @click="goToDetail(item.equipmentId)">
        <img :src="item.equipmentImage || 'default.png'" alt="饰品图" />
        <div class="equipment-name">{{ item.equipmentName }}</div>
      </div>
    </div>
  </div>

  <!-- 最新上架饰品展示区域 -->
  <div class="equipment-section new-section">
    <div class="header">
      <h2>最新上架</h2>
      <a href="equipment_list.html?sort=newest" class="view-all">进入市场</a>
    </div>
    <div class="equipment-list">
      <div
              v-for="item in newestEquipments"
              :key="item.equipmentId"
              class="equipment-card"
              @click="goToDetail(item.equipmentId)">
        <img :src="item.equipmentImage || 'default.png'" alt="饰品图" />
        <div class="equipment-name">{{ item.equipmentName }}</div>
      </div>
    </div>
  </div>
</div>

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>

<script>
  new Vue({
    el: '#topLinks',
    data() {
      return {
        userName: localStorage.getItem('userName') || ''
      }
    },
    template: `
      <div>
      <a v-if="!userName" href="login.html" class="login-link">登录</a>
      <a v-if="!userName" href="register.html" class="register-link">注册</a>
      <a v-if="userName" href="user.html" class="user-link">{{ userName }}</a>
      </div>
    `
  });

  new Vue({
    el: '#app',
    data() {
      return {
        equipments: [],
        newestEquipments: []
      }
    },
    created() {
      axios.get('/ffub/equipment')
              .then(res => {
                if (res.data && res.data.data) {
                  const data = res.data.data;
                  this.equipments = data.slice(0, 10);
                  this.newestEquipments = [...data]
                          .sort((a, b) => new Date(b.createTime) - new Date(a.createTime))
                          .slice(0, 10);
                }
              })
              .catch(err => {
                console.error("获取饰品数据失败", err);
              });
    },
    methods: {
      goToDetail(id) {
        window.location.href = `equipment_detail.html?id=${id}`;
      }
    }
  });
</script>

</body>
</html>
